<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<!---->
		<!--<script src="http://code.jquery.com/jquery-1.9.1.js"></script>-->
		<!--<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>-->
		<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
		<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
		<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

		<!--
		<script src="static/js/jquery-1.10.2.js"></script>
		-->

		<!--
		<link rel="stylesheet" href="static/js/jquery-ui-1.10.4/themes/base/jquery-ui.css">
		<script src="static/js/jquery-ui-1.10.4/ui/jquery-ui.js"></script>
		-->

		<link rel="stylesheet" type="text/css" href="static/css/style.css">
		-->
		{% if title %}
			<title>{{title}} - pygem</title>
		{% else %}
			<title>pygem</title>
		{% endif %}
		{% import 'employeeslist.html' as employeeslist %}
		{% import 'employee.html' as employeeeditor %}
		<script>
		$(function()
		{
			$('#employeeeditor').tabs();
		});
		</script>
	</head>
	<body>
		<div id="container">
			<div id="header" style="background-color:#FFA500;">Pygem: <a href="/index">{{_('Home')}}</a>
				<hr>
				{% with messages = get_flashed_messages() %}
				{% if messages %}
				<ul>
				{% for message in messages %}
					<li>{{ message }} </li>
				{% endfor %}
				</ul>
				{% endif %}
				{% endwith %}
			</div>
			<div id="employeesbrowser">
				{{ employeeslist.employeesbrowser(employees) }}
			</div>

			<div id="employeeeditor">
				<ul>
					<li><a href="#employeeeditormaindata">{{_('employee general')}}</a></li>
					<li><a href="#employeeeditorjobsdata">{{_('employee jobs data')}}</a></li>
				</ul>
				<div id="employeeeditormaindata">
					{{employeeeditor.employeeeditor()}}
				</div>
				<div id="employeeeditorjobsdata">
					<p>Jobs data</p>
				</div>
			</div>

			<div id="employeenotificationarea">
				Notifications go here
			</div>

			<div id="footer">
				Copyright pygem
			</div>
		</div>
		<script>
			$(document).ready(function()
			{
				console.log('document ready.');
				bindEvents();
			}); // end ready
		</script>
		<script src="static/js/functions.js"></script>
	</body>
</html>